<template>
  <div class="main_box">
    <div class="main_left">
      <div class="title_left">
        <img src="@/assets/images/xctown/lineChart.png" alt="">
        <h3
          @click="
            () => {
              $router.push('/XCAnalysis');
            }
          "
        >
          各乡镇执行率排名
        </h3>
      </div>
      <div class="main_left_bot">
        <VEcharts
          v-if="optsLeft"
          autoresize
          :options="optsLeft"
          style="width: 100%; height: 100%"
        />
      </div>
    </div>
    <div class="main_Mid">
      <div class="main_Mid_Top">
        <div
          v-for="(item, index) in MidTopList"
          :key="index"
          class="Mid_btn"
          @click="goProject(index, item.code)"
        >
          <p>{{ item.num }}</p>
          <span>{{ item.title }}</span>
        </div>
      </div>
      <div class="main_Mid_Center">
        <img :src="picurl" alt="">
      </div>
    </div>
    <div class="town_right">
      <div class="town_right_top">
        <div class="title_right">
          <div class="title_list">
            <img src="@/assets/img/townPreview/bar chart.png" alt="">
            <h3>各项目资金排名(万元)</h3>
          </div>
          <div class="details_right" @click="goMainTown">查看详情</div>
        </div>
        <div class="table_list">
          <!-- <dv-scroll-board
            :config="config"
            style="height:90%;color:#32C5FF;border-radius: 8px;"
          /> -->
          <el-table
            ref="table"
            :header-cell-style="{
              color: 'rgba(0,0,0,0.85)',
              background: 'rgba(109,200,236,0.35)',
              textAlign: ' center',
              height: '50px'
            }"
            :data="tableData"
            :cell-style="{
              color: 'rgba(0,0,0,0.85)',
              textAlign: 'center',
              fontSize: '12px'
            }"
            style="width: 100%;border-radius: 8px;"
            height="93%"
            :row-class-name="tableRowClassName"
            @row-click="goTableProject"
          >
            <el-table-column prop="CPROGRAMNAME" label="项目名称" />
            <el-table-column prop="YSS" label="总预算" />
            <el-table-column prop="ZZFS" label="拨付金额" />
            <el-table-column prop="JYZJ" label="结余资金" />
          </el-table>
        </div>
      </div>
      <div class="town_right_bot">
        <div class="title_list">
          <img src="@/assets/img/townPreview/bar chart.png" alt="">
          <h3>按项目分类</h3>
        </div>
        <div class="Bingtu">
          <VEcharts
            v-if="optsBingtu"
            autoresize
            :options="optsBingtu"
            style="width: 100%; height: 100%"
            @mouseover="pingOver"
            @mouseout="pingOut"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VEcharts from '@/components/vecharts';
import * as echarts from 'echarts/lib/echarts';
import { getQueryBodyByProduce } from '@/api/dynamicInterface';
import { message } from 'ant-design-vue';
import p from '@/utils/processRequest1';
let index = -1;
let filterList = null;

const filterApi = function(data) {
  if (!data.doNotAddOtherFilter) {
    data.filterList = [...(data.filterList || []), ...filterList];
  }

  return getQueryBodyByProduce(data).then(res => {
    if (!res.success) {
      message.warning(res.message);
    }

    if (!res.data) {
      res.data = [];
    }
    return Promise.resolve(res);
  });
};

// 各乡镇执行率
const TOWNEXECUTE_MAP = {
  ZXL: 'ZC', // 增长
  CENTERPRISENAME: 'DW', // 乡镇名字
  ZZFS: 'WCJD', // 完成进度
  BNSRLJL: 'BNSRLJ'// 本年收入累计
};

// 全县统计
const TOWNCOUNT_MAP = {
  YSS: 'YSS', // 总预算数
  ZXL: 'ZXL', // 执行率
  ZZFS: 'ZZFS' // 总支付数
};

// 资金汇总统计
const SUMMARYMONEYCOUNT = {
  CPROGRAMTYPENAME: 'CPROGRAMTYPENAME', // 乡镇名
  COUNT: 'COUNT', // 统计数
  CPROGRAMTYPECODE: 'CPROGRAMTYPECODE'
};

// 按项目分类
const PIEDATA_MAP = {
  CPROGRAMNAME: 'CPROGRAMTYPENAME',
  YSS: 'YSS',
  ZXL: 'ZXL'
};

export default {
  components: {
    VEcharts
  },
  props: {
    optionList: {
      type: Array,
      default: () => []
    },
    menuList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      pieData: [],
      townExecuteRate: {
        towns: [],
        zc: [],
        wcjd: [],
        bnsrljl: []
      },
      MidTopList: [
        {
          title: '总预算数(万元)',
          num: '-',
          code: ''
        },
        {
          title: '总支付数(万元)',
          num: '-',
          code: ''
        },
        {
          title: '执行率',
          num: '-',
          code: ''
        },
        {
          title: '-',
          num: '-',
          code: ''
        },
        {
          title: '-',
          num: '-',
          code: ''
        },
        {
          title: '-',
          num: '-',
          code: ''
        },
        {
          title: '-',
          num: '-',
          code: ''
        },
        {
          title: '-',
          num: '-',
          code: ''
        },
        {
          title: '-',
          num: '-',
          code: ''
        }
      ],
      leftList: {},
      leftListFu: {},
      config: {},
      rightBing: [],
      timer: null,
      mTime: null,
      picurl: '',
      tableData: []
    };
  },
  computed: {
    optsLeft() {
      // 各乡镇执行率排名
      // const _this = this;
      const newArr = {
        // color: ['rgba(91,143,249,0.85)', 'rgba(90,216,166,0.85)'],
        color: ['rgba(91,143,249,0.85)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        // legend: {
        //   orient: 'vertical',
        //   data: ['支出', '收入'],
        //   right: '5%',
        //   top: '0%',
        //   textStyle: {
        //     // 图例文字的样式
        //     color: '#ffffff;',
        //     fontSize: 12
        //   }
        // },
        grid: {
          top: '4%',
          left: '0%',
          right: '16%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          // type: 'log',

          axisLabel: {
            interval: 0,
            rotate: 20,
            fontSize: 16,
            // inside: true,
            formatter: function(value) {
              let ret = '';
              const maxLength = 5; // 每项显示文字个数
              const valLength = value.length;
              const rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (let i = 0; i < rowN; i++) {
                  let temp = '';
                  const start = i * maxLength;
                  const end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp; // 凭借最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            }
          },
          type: 'category',
          data: this.townExecuteRate.towns,
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0.6)'
            }
          }
        },
        series: [
          // {
          //   name: '总支付数',
          //   type: 'bar',
          //   barMaxWidth: '50',
          //   label: {
          //     show: true
          //   },
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          //         {
          //           offset: 0,
          //           color: '#96a9c4'
          //         },
          //         {
          //           offset: 1,
          //           color: '#5d7092'
          //         }
          //       ]),
          //       label: {
          //         show: false, // 是否显示
          //         position: 'right', // 显示位置
          //         textStyle: {
          //           // 文字样式
          //           color: 'rgba(91,143,249,0.85)',
          //           fontSize: '15'
          //         }
          //       }
          //     }
          //   },
          //   data: this.townExecuteRate.zzfs
          // },
          {
            name: '本年收入累计',
            type: 'bar',
            // stack: 'total',

            barMaxWidth: '45',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //   {
                //     offset: 0,
                //     color: '#a6e6f7'
                //   },
                //   {
                //     offset: 1,
                //     color: '#6dc8ec'
                //   }
                // ]),
                label: {
                  show: true, // 是否显示
                  position: 'right', // 显示位置
                  textStyle: {
                    // 文字样式
                    color: '#1fd2ff',
                    fontSize: '15'
                  }
                  // formatter: function(params) {
                  //   // 核心部分 formatter 可以为字符串也可以是回调
                  //   if (params.value) {
                  //     // 如果当前值存在则拼接
                  //     return `${params.value}%`;
                  //   } else {
                  //     // 否则返回个空
                  //     return '0%';
                  //   }
                  // }
                }
              }
            },
            data: this.townExecuteRate.bnsrljl
          },
          {
            name: '完成进度',
            type: 'bar',
            // stack: 'total',

            barMaxWidth: '45',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                color: '#6dc8eb',
                label: {
                  show: true, // 是否显示
                  position: 'right', // 显示位置
                  textStyle: {
                    // 文字样式
                    color: '#1fd2ff',
                    fontSize: '15'
                  },
                  formatter: function(params) {
                    // 核心部分 formatter 可以为字符串也可以是回调
                    if (params.value) {
                      // 如果当前值存在则拼接
                      return `${params.value}%`;
                    } else {
                      // 否则返回个空
                      return '0%';
                    }
                  }
                }
              }
            },
            data: this.townExecuteRate.wcjd
          },
          {
            name: '增长',
            type: 'bar',
            // stack: 'total',

            barMaxWidth: '45',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                color: '#6dc8ec',
                label: {
                  show: true, // 是否显示
                  position: 'right', // 显示位置
                  textStyle: {
                    // 文字样式
                    color: '#1fd2ff',
                    fontSize: '15'
                  },
                  formatter: function(params) {
                    // 核心部分 formatter 可以为字符串也可以是回调
                    if (params.value) {
                      // 如果当前值存在则拼接
                      return `${params.value}%`;
                    } else {
                      // 否则返回个空
                      return '0%';
                    }
                  }
                }
              }
            },
            data: this.townExecuteRate.zc
          }
        ]
      };
      return newArr;
    },
    optsBingtu() {
      const newArr2 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          show: true,

          // top:"10%",
          right: '4%',
          textStyle: {
            // 图例文字的样式
            color: '#1fd2ff',
            fontSize: 12
          },
          formatter: function(name) {
            return echarts.format.truncateText(
              name,
              80,
              '14px Microsoft Yahei',
              '…'
            );
          },
          tooltip: {
            show: true
          }
        },
        series: [
          // 按项目分类
          {
            name: '项目分类',
            type: 'pie',
            radius: '70%',
            data: this.pieData,
            // roseType: 'radius',
            label: {
              show: true,
              // position: 'inner',
              formatter: function(params) {
                return params.data.ZXL;
              },
              textStyle: {
                color: '#faad14',
                fontSize: 14
              }
            },
            center: ['40%', '50%'],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            color: [
              'rgba(232,104,74,0.85)',
              'rgba(90,216,166,0.85)',
              'rgba(246,189,22,0.85)',
              'rgba(93,112,146,0.85)',
              'rgba(91,143,249,0.85)'
            ]
          }
        ]
      };
      return newArr2;
    }
  },
  created() {
    p().then(({ url }) => {
      this.picurl = `${url}/onlinePreview?fileId=${this.$route.query.FILEID}`;
    });

    filterList = [];
    const ENTERPRISECODE = this.$route.query.CENTERPRISECODE1;
    if (ENTERPRISECODE) {
      filterList.push({
        col: 'CENTERPRISECODE1',
        value: ENTERPRISECODE
      });
    }

    this.initPage();
  },
  mounted() {
    // this.timer = setInterval(() => {
    //   // this.leftList.tx=[]
    //   this.leftList.Yss = [];
    //   this.leftList.ZHS = [];
    //   this.leftList.RATE = [];
    //   // this.getleft();
    //   setTimeout(() => {
    //     this.leftList.Yss = this.leftListFu.Yss;
    //     this.leftList.ZHS = this.leftListFu.ZHS;
    //     this.leftList.RATE = this.leftListFu.RATE;
    //   }, 800);
    // }, 4000);
  },

  beforeDestroy() {
    // 页面关闭时清除定时器
    clearInterval(this.timer);
    clearInterval(this.mTime);
  },
  methods: {
    pieActive() {
      // 高亮所在下标
      const dataLength = this.$children[2].options.series[0].data.length; // 当前饼图有多少个扇形
      // 用定时器控制饼图高亮
      this.mTime = setInterval(() => {
        // 清除之前的高亮
        this.$children[2].dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index
        });
        index = (index + 1) % dataLength;
        // 当前下标高亮
        this.$children[2].dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: index
        });
        this.$children[2].dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index
        });
        if (index > dataLength) {
          index = 0;
        }
      }, 2000);
    },
    // 鼠标划入
    pingOver() {
      clearInterval(this.mTime);
      // this.$children[2].dispatchAction({
      //   type: 'downplay',
      //   seriesIndex: 0,
      //   dataIndex: index
      // });
    },
    pingOut() {
      this.pieActive();
    },
    getLeft() {
      getQueryBodyByProduce().then(res => {
        if (res.success) {
          // console.log(res);
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'warning'
          });
        }
      });
    },
    getTable(data) {
      this.tableData = data;
      // 注意这里数据要同步取
      // this.config = {
      //   data,
      //   header: ['项目名称', '总预算', '资金使用率', '总支付数'],
      //   headerBGC: 'rgba(109,200,236,0.35)',
      //   columnWidth: [4500, 2000, 2000, 2000],
      //   align: ['center', 'center', 'center', 'center'],
      //   oddRowBGC: 'rgba(0,0,0,0.00)',
      //   evenRowBGC: 'rgba(109,200,236,0.10)',
      //   rowNum: 8
      // };
    },

    initPage() {
      const {
        getTownExecuteRate,
        getTownsCount,
        getSummaryMoneyCount,
        getSummaryMoneyBot,
        getAidFinancialRank,
        getPieData
      } = this;

      getTownExecuteRate();
      getTownsCount();
      getSummaryMoneyCount();
      getSummaryMoneyBot();
      getAidFinancialRank();
      getPieData();
    },

    // 各乡镇执行率排名
    getTownExecuteRate() {
      filterApi({
        tableId: 631,
        // tableId: 538,

        doNotAddOtherFilter: true
      }).then(res => {
        if (res.success) {
          const DW = TOWNEXECUTE_MAP.CENTERPRISENAME;
          const ZC = TOWNEXECUTE_MAP.ZXL;
          const WCJD = TOWNEXECUTE_MAP.ZZFS;
          const BNSRLJL = TOWNEXECUTE_MAP.BNSRLJL;

          res.data.reverse();
          this.townExecuteRate.towns = res.data.map(
            item => item[DW]
          );
          this.townExecuteRate.zc = res.data.map(item => {
            return Number(item[ZC]);
          });
          this.townExecuteRate.wcjd = res.data.map(item => item[WCJD]);
          this.townExecuteRate.bnsrljl = res.data.map(item => item[BNSRLJL]);
        }
      });
    },

    // 全县统计
    getTownsCount() {
      filterApi({
        tableId: 538
      }).then(res => {
        const data = res.data;
        if (res.success && Array.isArray(data) && data.length) {
          const dataa = data[0];
          this.MidTopList[0].num = dataa[TOWNCOUNT_MAP.YSS];
          this.MidTopList[1].num = dataa[TOWNCOUNT_MAP.ZZFS];
          this.MidTopList[2].num = dataa[TOWNCOUNT_MAP.ZXL];
        }
      });
    },

    // 各类资金汇总
    getSummaryMoneyCount() {
      filterApi({
        tableId: 540
      }).then(res => {
        if (res.success) {
          const jump = 3;
          res.data.forEach((e, i) => {
            const item = this.MidTopList[i + jump];
            const CPROGRAMTYPENAME = SUMMARYMONEYCOUNT.CPROGRAMTYPENAME;
            const COUNT = SUMMARYMONEYCOUNT.COUNT;
            const code = SUMMARYMONEYCOUNT.CPROGRAMTYPECODE;
            item.title = e[CPROGRAMTYPENAME];
            item.num = e[COUNT];
            item.code = e[code];
          });
        }
      });
    },
    getSummaryMoneyBot() {
      filterApi({
        tableId: 582
      }).then(res => {
        if (res.success) {
          res.data.forEach((item, i) => {
            this.MidTopList[i + 6].title = item.CRESOURCENAME;
            this.MidTopList[i + 6].num = item.COUNT;
            this.MidTopList[i + 6].code = item.CRESOURCECODE;
          });
        }
      });
    },
    // 财政补助各项目资金排名
    getAidFinancialRank() {
      filterApi({
        tableId: 541,
        pageIndex: 0,
        pageSize: 50,
        pageType: 1
      }).then(res => {
        if (res.success) {
          // const arr = res.data.map(item => Object.values(item));
          this.getTable(res.data);
        }
      });
    },

    // 按项目分类
    getPieData() {
      filterApi({
        tableId: 542,
        pageIndex: 0,
        pageSize: 5,
        pageType: 1
      }).then(res => {
        if (res.success) {
          const data = res.data;
          const CPROGRAMNAME = PIEDATA_MAP.CPROGRAMNAME;
          const YSS = PIEDATA_MAP.YSS;
          const ZXL = PIEDATA_MAP.ZXL;
          data.forEach(item => {
            item.name = item[CPROGRAMNAME];
            item.value = item[YSS];
            item.ZXL = item[ZXL];
          });

          this.pieData = data;
        }
      });
    },

    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'name-row';
      } else if (rowIndex % 2 === 1) {
        return 'plan-row';
      }
      return '';
    },

    goRoute(tilte) {
      this.optionList.forEach(it => {
        if (it.ENTERPRISENAME === this.$route.query.ENTERPRISENAME) {
          console.log(1);
          this.menuList.forEach(item => {
            if (item.meta.title === tilte) {
              if (item.children) {
                item.children.forEach(chit => {
                  if (chit.meta.title === tilte) {
                    const params = {
                      path: chit.path,
                      query: {
                        title: chit.meta.title,
                        menuId: chit.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: chit.isHideLeft,
                        isHideTop: chit.isHideTop,
                        CENTERPRISECODE1: it.CENTERPRISECODE1
                      }
                    };
                    this.$router.push(params);
                  } else {
                    const params = {
                      path: chit.path,
                      query: {
                        title: item.meta.title,
                        menuId: item.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: item.isHideLeft,
                        isHideTop: item.isHideTop,
                        CENTERPRISECODE1: it.CENTERPRISECODE1
                      }
                    };
                    this.$router.push(params);
                  }
                });
              } else {
                const params = {
                  path: item.path,
                  query: {
                    title: item.meta.title,
                    menuId: item.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    ENTERPRISECODE: it.ENTERPRISECODE,
                    ENTERPRISENAME: it.ENTERPRISENAME,
                    FILEID: it.FILEID,
                    isHideLeft: item.isHideLeft,
                    isHideTop: item.isHideTop,
                    CENTERPRISECODE1: it.CENTERPRISECODE1
                  }
                };
                this.$router.push(params);
              }
            }
          });
        }
      });
    },

    goRouteBtn(tilte, name, code) {
      const { title } = this.$route.query;
      this.optionList.forEach(it => {
        if (it.ENTERPRISENAME === this.$route.query.ENTERPRISENAME) {
          this.menuList.forEach(item => {
            if (item.meta.title === tilte) {
              if (item.children) {
                item.children.forEach(chit => {
                  if (chit.meta.title === tilte) {
                    const params = {
                      path: chit.path,
                      query: {
                        title: chit.meta.title,
                        menuId: chit.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: chit.isHideLeft,
                        isHideTop: chit.isHideTop,
                        [code]: name,
                        routeTitle: title,
                        CENTERPRISECODE1: it.CENTERPRISECODE1
                      }
                    };
                    this.$router.push(params);
                  } else {
                    const params = {
                      path: chit.path,
                      query: {
                        title: item.meta.title,
                        menuId: item.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: item.isHideLeft,
                        isHideTop: item.isHideTop,
                        [code]: name,
                        routeTitle: title,
                        CENTERPRISECODE1: it.CENTERPRISECODE1
                      }
                    };
                    this.$router.push(params);
                  }
                });
              } else {
                const params = {
                  path: item.path,
                  query: {
                    title: item.meta.title,
                    menuId: item.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    ENTERPRISECODE: it.ENTERPRISECODE,
                    ENTERPRISENAME: it.ENTERPRISENAME,
                    FILEID: it.FILEID,
                    isHideLeft: item.isHideLeft,
                    isHideTop: item.isHideTop,
                    [code]: name,
                    routeTitle: title,
                    CENTERPRISECODE1: it.CENTERPRISECODE1
                  }
                };
                this.$router.push(params);
              }
            }
          });
        }
      });
    },

    // 九宫格类型跳转
    goProject(val, code) {
      if (val <= 2) {
        this.goRoute('项目分析');
      } else if (val <= 5) {
        this.goRouteBtn('项目分析', code, 'CPROGRAMTYPECODE');
      } else {
        this.goRouteBtn('项目分析', code, 'CRESOURCECODE');
      }
    },

    // 点击查看详情进行跳转
    goMainTown() {
      this.goRoute('项目分析');
    },

    // 表格单行跳转详情
    goTableProject(row) {
      this.goRouteBtn('项目分析', row.CPROGRAMNAME, 'PROGRAMNAME');
    }
  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.main_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.main_left {
  width: 24%;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
  height: 100%;
  .title_left {
    padding-top: 3%;
    height: 4.5%;
    display: flex;
    align-items: center;
    padding-left: px2vw(25px);
    img {
      margin-right: px2vw(8px);
      vertical-align: bottom;
    }
    h3 {
      color: #333333;
      font-size: px2vw(18px);
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      margin: 0;
    }
  }
  .main_left_bot {
    height: 92.5%;
    padding-left: px2vw(10px);
  }
}
.main_Mid {
  width: 49%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .main_Mid_Top {
    height: 40%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
    .Mid_btn {
      width: 32%;
      height: 30%;
      background: rgba(255, 255, 255, 0.65);
      border-radius: 20px;
      box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      p {
        font-size: px2vw(36px);
        height: 50%;
        color: #576a95;
        margin: 0;
      }
      span {
        color: #999999;
        font-size: px2vw(18px);
      }
    }
  }
  .main_Mid_Center {
    height: 58.5%;
    width: 100;
    border-radius: 20px;
    // background: url("~@/assets/images/xctown/地图背景 (1).png") no-repeat;
    // background-size: 100% 100%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.town_right {
  width: 24%;

  height: 100%;
  .town_right_top {
    height: 66%;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 20px;
    box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
    .title_right {
      padding-right: px2vw(18px);
      justify-content: space-between;
      height: 8%;
      display: flex;
      align-items: center;
      padding-left: (25px);
      padding-top: 2%;
      img {
        margin-right: px2vw(8px);
        vertical-align: bottom;
      }
      h3 {
        color: #000000;
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        margin: 0;
      }
      .title_list {
        display: flex;
        height: 60%;
        align-items: center;
      }
      .details_right {
        border: 1px solid #1fd2ff;
        border-radius: 3px;
        padding: px2vw(4px) px2vw(10px);
        color: #1fd2ff;
        font-size: px2vw(14px);
        cursor: pointer;
      }
    }
    .table_list {
      margin-top: px2vw(10px);
      height: calc(92% - 10px);
      padding: 0 px2vw(13px);
    }
  }
  .town_right_bot {
    background: rgba(255, 255, 255, 0.65);
    border-radius: 20px;
    box-shadow: 9px 9px 25px 0px rgba(0, 0, 0, 0.08);
    height: calc(34% - 16px);
    margin-top: 1em;
    .title_list {
      height: 18%;
      display: flex;
      align-items: center;
      padding-left: px2vw(25px);
      h3 {
        color: #000000;
        font-size: px2vw(18px);
        margin: 0;
        margin-left: px2vw(8px);
      }
    }
    .Bingtu {
      height: calc(88% - 20px);
    }
  }
}
/deep/.dv-scroll-board {
  .rows {
    .row-item {
      cursor: pointer;

      &:hover {
        background: rgba(91, 143, 249, 0.35) !important;
        border-radius: 10px 0px 0px 10px !important;
      }
    }
  }
}
/deep/.el-table .name-row {
  background: rgba(0, 0, 0, 0);
  // color: #0169d4;
}

/deep/.el-table .plan-row {
  background: rgba(109, 200, 236, 0.1);
  // color: #0169d4;
}
/deep/.el-table__body-wrapper .el-table__row {
  height: 55px;
}
/deep/.el-table .cell {
  padding: 0 !important;
}
/deep/.el-table td,
.el-table th.is-leaf {
  border: 0;
  // border-bottom: 1px solid #32c5ff;
}
</style>
